<template>
  <div class="chart-content-wrapper">
    <top-filter :title="title">
      <single-list-filter-without-cb @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
    </top-filter>
    <div id="hospitalInPeopleNumAnalyseId" class="chart-type1" style="height:68%"></div>
    <summarize :showSummarizeText="conclusion"></summarize>
  </div>
</template>

<script>
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import {straightSideOption} from '../../common/mixin'
  import {getHospitalInPeopleNumData} from '../../../api/last-api'
  export default {
    props: ['isChange'],
    watch: {
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    components: {
      Summarize,
      TopFilter,
      SingleListFilterWithoutCb
    },
    data () {
      return {
        chartOptions: straightSideOption,
        title: '医院就诊人次/人数占比分析',
        conclusion: ''
      }
    },
    mounted(){
      // this.drawHospitalInPeopleNumLine();
      this.setDataIntoCharts(require('./test/hospitalInNumAnalyse.json').data)
    },
    methods: {
      drawHospitalInPeopleNumLine(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('hospitalInPeopleNumAnalyseId'), null, {renderer: 'canvas'})
        // 绘制图表

        this.myChart.setOption(this.chartOptions);
      },
      getHospitalInPeopleNumData() {
        getHospitalInPeopleNumData('222', '333', '222', '333', '222').then(response => {
          if (response.code == 0) {
            // 设置顶部的标题
            this.everyMedicalTypeFilter.title = response.data.reportName
            // 设置结论
            this.conclusion = response.data.conclusion
            // 清空底部标识的data数据
            this.chartOptions.legend.data = []
            // 清空X轴线上面的年份数据，取第一条数据的年份
            this.chartOptions.xAxis[0].data = []
            // 清空Y轴线上面的对应金额数据
            this.chartOptions.series = []
            response.data.arrayVo.forEach((item, index) => {
              if (index == 0) {
                this.chartOptions.xAxis[0].data = item.year
              }
              this.chartOptions.legend.data.push(item.hospitalName)
              this.chartOptions.series.push({
                name: item.hospitalName,
                type: 'line',
                data: item.avgDay,
                symbolSize: 10,
                symbol: 'circle',
                showSymbol: true,
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    fontSize: 20
                  }
                },
                markPoint: {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
                },
                markLine: {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
                }
              })
            })
            this.drawYearAverageInHosDaysCharts()
          }
        }).catch(err => {
        })
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.title = response.reportName
        // 设置结论
        this.conclusion = response.reportConclusion
        // 清空直方图数据,纵坐标数值
        this.chartOptions.yAxis[0].data = []
        this.chartOptions.yAxis[1].data = []
        // 清空平均增长率的数据
        this.chartOptions.series[0].data = []
        // 清空当前年份的直方图数据
        this.chartOptions.series[1].data = []
        // 清空去年年份的直方图数据
        this.chartOptions.series[2].data = []

        this.chartOptions.yAxis[0].data = response.medInstitutionList.reverse()
        this.chartOptions.yAxis[1].data = response.medInstitutionList.reverse()

        this.chartOptions.series[0].data = response.institutionGrowthRateList
        this.chartOptions.series[1].data = response.cyProportionList
        this.chartOptions.series[2].data = response.lyProportionList

        this.chartOptions.visualMap[0].pieces[0].max = this.avg(response.institutionGrowthRateList)
        this.chartOptions.visualMap[0].pieces[1].mix = this.avg(response.institutionGrowthRateList)

        this.chartOptions.series[1].markLine.data[0].xAxis = response.cyAvgProportion
        this.chartOptions.series[2].markLine.data[0].xAxis = response.lyAvgProportion

        this.drawHospitalInPeopleNumLine()
      },
      avg(arry){
        let sum = 0;
        let len = arry.length;
        for (let i = 0; i < len; i++) {
          sum += arry[i];
        }
        let d = parseInt((sum / len) * 100) / 100;
        return d;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import "../../../assets/css/last-charts.css";
</style>
